import {
  // BrowserRouter as Router,
  Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';

import { customHistory } from './utils/history';

// 项目页面
import { Login } from '@/pages/Login/Login';
import { GeekLayout } from '@/pages/GeekLayout/GeekLayout';
import { NotFound } from '@/pages/NotFound/NotFound';

// 根组件样式
import './App.scss';
import { isAuth } from '@/utils';

export const App = () => {
  return (
    <Router history={customHistory}>
      {/* <Router> */}
      <div className="app">
        <Switch>
          {/* “/” 匹配路由组件 */}
          <Route exact path={'/'} render={() => <Redirect to={'/home'} />} />
          {/* 管理页面 */}
          {/* 原来的方式 */}
          {/* <Route path={'/home'} component={GeekLayout} /> */}
          {/* 鉴权的方式，render 属性来实现 */}
          <Route
            path={'/home'}
            render={(props) => {
              // console.log('home 组件的 props=>', props);
              // 判断用户是否登录
              if (isAuth()) {
                return <GeekLayout />;
              }
              return (
                <Redirect
                  to={{
                    pathname: '/login',
                    state: {
                      from: props.location.pathname,
                    },
                  }}
                />
              );
            }}
          />
          {/* 登录页面 */}
          <Route path={'/login'} component={Login} />
          {/* 404页面 */}
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
};
